<template>
  <div class="people-container" ref="people">
    <girl
      class="people girl"
      :style="{
        width: svgWidth / 1.1 + 'px',
        height: svgWidth / 1.1 + 'px',
        left: left + 'px',
        transform: `translateX(25%) translateY(10%)`,
      }"
    ></girl>
    <man
      class="people man"
      :style="{
        width: svgWidth / 1.1 + 'px',
        height: svgWidth / 1.1 + 'px',
        left: left + 'px',
        transform: `translateX(-25%) translateY(10%)`,
      }"
    ></man>
  </div>
</template>
<script>
import man from "@/assets/svg/man.svg";
import girl from "@/assets/svg/girl.svg";
export default {
  props: ["data"],
  components: {
    man,
    girl,
  },
  data() {
    return {
      svgWidth: 0,
      left: 0,
      right: 0,
      Dice: null,
    };
  },
  methods: {
    /**
     * @param { 'girl'|'man' } type - 男生或女生
     * @returns {string}
     */
    // computePlace(type) {},
  },
  mounted() {
    this.svgWidth = this.$refs.people.getBoundingClientRect().width;
    const { left, right } = this.$refs.people.getBoundingClientRect();

    this.left = left;
    this.right = right;
    // const place = 98 % this.data.order;
  },
};
</script>
<style lang="scss">
.people-container {
  width: 100%;
  height: 100%;
  .people {
    position: absolute;
    transition: all 0.5s;
  }
  .girl {
    right: 40px;
    transform: translateX();
  }
}
</style>
